<template>
  <div id="UserCenterCollect">
    <div class="title">
      <span class="iconfont icon-shoucang"></span>
      我的收藏
    </div>
    <div class="collect-list">
      <el-row :gutter="20">
        <div
          class="el-row-div"
          v-for="v in tableData"
          :key="v.id"
          @click="toCourseItem(v)"
        >
          <el-col :span="8">
            <div class="list-item">
              <i
                class="el-icon-delete"
                title="删除"
                @click.stop="setRemoveCollect(v)"
              ></i>
              <p class="category-labels">
                {{ v.subType | fiterCategoryLabels }}
              </p>
              <div class="category-img">
                <img :src="coverImgFile(v)" />
              </div>
              <p class="one-ellipsis category-name">课程名称：{{ v.name }}</p>
              <!-- <p class="one-ellipsis">章节</p> -->
              <p class="one-ellipsis">资源名称：{{ v.knowledgeName }}</p>
              <p class="collect-date">收藏时间 {{ v.optTime }}</p>
            </div>
          </el-col>
        </div>
      </el-row>
      <!-- <Pagination
                v-show="parseInt(pageObj.count) > 0"
                :total="parseInt(pageObj.count)"
                @change="getList"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.limit"
            />-->
      <el-empty v-if="tableData.length == 0" description="暂无数据"></el-empty>
    </div>
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo.js'
import {
  sysQueryMyOptResource,
  sysConcernedLogDelete,
} from '@/api/home/sysConcernedLog'
import { openApiSysCourseQuery } from '@/api/openApi'
export default {
  mixins: [setInfo],
  data() {
    return {
      pageObj: {},
      tableData: [],
      listQuery: {
        // page: 1,
        // limit: 4,
        opt: 'collect',
      },
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      sysQueryMyOptResource(this.listQuery).then((res) => {
        this.tableData = res.data.data
        // this.pageObj = res.data;
      })
    },
    toCourseItem(row) {
      if (row.subType == 5 || row.subType == 6) {
        let name = ''

        if (row.subType == 5) {
          name = 'micro-detail'
        }
        if (row.subType == 6) {
          name = 'training-detail'
        }
        this.$router.push({
          name: name,
          query: { courseId: row.id },
        })
      } else {
        let { sysKnowledge } = row
        let { courseId, type } = sysKnowledge[0]
        this.getCourseInfo(courseId).then((v) => {
          this.$store.commit('SETCURCOURSE', v)
          this.$store.commit('SETKNOLEDGE', row)
          var name = 'knowdedge-detail'
          switch (type) {
            case '1':
              name = 'knowdedge-detail'
              break
            case '2':
              name = 'specialty-knowdedge'
              break
            case '3':
              name = 'arms-knowdedge-home'
              break
            case '4':
              name = 'topic-knowdedge-detail'
              break
            default:
              name = 'knowdedge-detail'
          }
          this.$router.push({
            name: name,
            query: { id: row.id, queryMode: 1 },
          })
        })
      }
    },
    getCourseInfo(id) {
      return new Promise((resolve, reject) => {
        openApiSysCourseQuery({ id })
          .then((res) => {
            resolve(res.data.data[0])
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    //删除确认
    setRemoveCollect(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delete(row)
        })
        .catch(() => {})
    },
    //删除
    delete(row) {
      sysConcernedLogDelete(row.sysConcernedId).then((res) => {
        this.getList()
        this.$message({
          message: '删除成功',
          type: 'success',
        })
      })
    },
  },
}
</script>
<style scoped lang="scss">
#UserCenterCollect {
  width: 100%;
  min-height: 500px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  .title {
    color: #333;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    background-color: var(--colorHover1);
    span {
      color: #ed9420;
      margin-left: 30px;
      margin-right: 10px;
      font-size: 24px;
    }
  }
  .collect-list {
    padding: 20px 30px;
    .category-labels {
      position: absolute;
      left: 0;
      top: 9px;
      background: #d7d140;
      color: #fff;
      padding: 1px 10px;
      z-index: 2;
      border-radius: 0 50px 50px 0;
      font-size: 16px;
      font-weight: 900;
    }
    .list-item {
      position: relative;
      p.one-ellipsis {
        line-height: normal;
        margin-top: 5px;
      }
      .category-name {
        font-size: 16px;
        font-weight: 900;
      }
      .el-icon-delete {
        position: absolute;
        right: 4px;
        bottom: 8px;
        z-index: 99;
        font-size: 16px;
      }
    }
  }
  .category-img {
    border-radius: 10px;
    border: 1px solid #eee;
  }
  .category-img img {
    width: 100%;
    height: 170px;
    border-radius: 10px;
    display: block;
  }
  p.collect-date {
    font-size: 12px;
    color: #979494;
  }
  .el-row-div {
    cursor: pointer;
  }
}
</style>